<template>
  <close-layer
    @close="$emit('close')"
    :enable-drag="true"
    :style="style">
    <div
      slot="layer-content"
      :style="contentStyle">
      <div class="app1" style="overflow-y: scroll;max-height: 400px">
        <span style="margin: 5px">{{ content }}</span>
      </div>
    </div>
  </close-layer>
</template>

<script>
import CloseLayer from '@/components/CloseLayer/CloseLayer'

export default {
  name: 'GraphDetail',
  components: { CloseLayer },
  data() {
    return {
      style: {
        'position': 'absolute',
        'top': this.positionY + 'px',
        'left': this.positionX + 'px',
        'z-index': 3000
      },
      contentStyle: {
        'white-space': 'pre-wrap',
        'word-break': 'break-word',
        'border-radius': '5px',
        'background-color': '#f8f8f8',
        'max-width': '420px',
        'height': '400px'
      }
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: '{}'
    },
    positionX: {
      type: Number,
      default: 0
    },
    positionY: {
      type: Number,
      default: 0
    }
  }
}

</script>

<style scoped>

</style>
